<template>
	<view class="cart-container bottom-index">
		<!-- 顶部导航栏 -->
		<qmy-custom-navbar title="购物车"></qmy-custom-navbar>

		<!-- 加载蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 购物车为空状态 -->
		<view class="empty-cart" v-if="cartData.items.length === 0 && dataLoaded">
			<image src="https://gd-hbimg.huaban.com/9768d51025a1ca456e05f14e0341661fa7fadb0f22de-oW6STT_fw1200webp"
				mode="aspectFit"></image>
			<text class="empty-text">购物车还是空的，去逛逛吧~</text>
			<view class="go-shopping-btn" @click="$NavigateTo('/pages/index/index')">去选购</view>
		</view>

		<!-- 购物车内容 -->
		<view class="cart-content" :style="{paddingTop:menuObject.top + menuObject.height + 8 +'px'}"
			v-else-if="dataLoaded">
			<!-- 商品列表 -->
			<view class="cart-list">
				<!-- 有效商品项 -->
				<view class="cart-item" :class="{'slide-open': validItemsSwipingStates[item._id]}"
					v-for="(item, index) in validItems" :key="index" @touchstart="touchStart(index, $event)"
					@touchmove="touchMove(index, $event)" @touchend="touchEnd(index, $event)"
					:style="{transform: 'translateX(' + item.offsetX + 'px)'}">
					<view class="item-content">
						<view class="checkbox" @click.stop="toggleItemCheck(item)">
							<text class="iconfont checkbox-inner " :class="{'checked ic-gou1': item.is_checked}"></text>
						</view>
						<image @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item.goods_id}`)" class="goods-image"
							:src="item.goods_image" mode="aspectFill"></image>
						<view class="goods-info">
							<view @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item.goods_id}`)"
								class="goods-name">
								{{item.goods_name}}
							</view>
							<view @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item.goods_id}`)"
								class="item-specs">
								<text class="spec-text" v-for="(spec, sIndex) in item.specs"
									:key="sIndex">{{spec}}</text>
							</view>
							<view class="price-row">
								<view @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item.goods_id}`)"
									class="price">
									<text class="price-symbol">¥</text>
									<text class="price-value">{{(item.price/100).toFixed(2)}}</text>
									<text class="original-price"
										v-if="item.original_price">¥{{(item.original_price/100).toFixed(2)}}</text>
								</view>
								<view class="quantity-control">
									<view class="qty-btn" :class="{'disabled': item.quantity <= 1}"
										@click.stop="changeQuantity(item, -1)">
										-
									</view>
									<input type="number" v-model="item.quantity" @blur="updateQuantity(item)"
										class="quantity-input" />
									<view class="qty-btn" :class="{'disabled': item.quantity >= item.stock}"
										@click.stop="changeQuantity(item, 1)">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="delete-btn" @click.stop="removeItem(item)">
						<text class="iconfont ic-delete-gray"></text>
					</view>
				</view>

				<!-- 失效商品区域 -->
				<view class="invalid-section" v-if="invalidItems.length > 0">
					<view class="invalid-header">
						<text class="invalid-title">失效商品 {{invalidItems.length}}件</text>
						<text class="clear-invalid" @click="clearInvalidItems">清空失效商品</text>
					</view>
					<!-- 失效商品列表 -->
					<view class="cart-item invalid-item" :class="{'slide-open': invalidItemsSwipingStates[item._id]}"
						v-for="(item, index) in invalidItems" :key="item.goods_id"
						@touchstart="touchStart(index, $event, true)" @touchmove="touchMove(index, $event, true)"
						@touchend="touchEnd(index, $event, true)">
						<view class="item-content">
							<view class="checkbox disabled">
								<text class="iconfont checkbox-inner"></text>
							</view>
							<image class="goods-image" :src="item.goods_image" mode="aspectFill"></image>
							<view class="goods-info">
								<view class="goods-name">{{item.goods_name}}</view>
								<view class="item-specs">
									<text class="spec-text" v-for="(spec, sIndex) in item.specs"
										:key="sIndex">{{spec}}</text>
								</view>
								<view class="price-row">
									<view class="price">
										<text class="price-symbol">¥</text>
										<text class="price-value">{{(item.price/100).toFixed(2)}}</text>
									</view>
									<text class="invalid-tag">已失效</text>
								</view>
							</view>
						</view>
						<view class="delete-btn" @click.stop="removeItem(item)">
							<text class="iconfont ic-delete-gray"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部结算栏 -->
			<view class="cart-footer bottom-h">
				<view class="select-all" @click="toggleSelectAll">
					<view class="checkbox" :class="{'checked': isAllSelected}">
						<text class="iconfont ic-gou1 fs-42" v-if="isAllSelected"></text>
					</view>
					<text class="select-text">全选</text>
				</view>

				<view class="price-section">
					<view class="total-price">
						<text>合计：</text>
						<text class="price-symbol">¥</text>
						<text class="price-value">{{(totalPrice/100).toFixed(2)}}</text>
					</view>
					<view v-if="freeShipping == 0" class="price-tip">包邮</view>
					<view v-else class="price-tip">
						含运费<text class="price-symbol">¥</text><text
							class="price-value">：{{(freeShipping/100).toFixed(2)}}</text>
					</view>
				</view>

				<view class="checkout-btn" :class="{'disabled': selectedCount === 0}" @click="checkout">
					结算({{selectedCount}})
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<uni-popup ref="deletePopup" type="dialog">
			<uni-popup-dialog type="warning" title="删除确认" content="确定要删除这个商品吗？" :before-close="true"
				@confirm="confirmDeleteAction" @close="cancelDelete">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 清空失效商品确认弹窗 -->
		<uni-popup ref="clearInvalidPopup" type="dialog">
			<uni-popup-dialog type="warning" title="清空确认" content="确定要清空所有失效商品吗？" :before-close="true"
				@confirm="confirmClearInvalidItems" @close="cancelClearInvalidItems">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 推荐商品 -->
		<view class="recommend-goods" v-if="dataLoaded">
			<view class="recommend-header">
				<view class="section-title">
					<image class="title-decoration"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png">
					</image>
					<text class="title-text">猜你喜欢</text>
				</view>
			</view>

			<view class="recommend-waterfall">
				<view class="recommend-column">
					<view class="recommend-item" v-for="item in recommendGoods.filter((_, i) => i % 2 === 0)"
						:key="item._id" @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image :src="item.goods_banner[0].url" mode="widthFix" class="recommend-image"></image>
						<view class="recommend-info">
							<text class="recommend-name text-element-2">{{item.name}}</text>
							<view class="recommend-price-box">
								<text class="recommend-price">¥{{(item.default_price/100).toFixed(2)}}</text>
								<text class="recommend-original-price"
									v-if="item.original_price">¥{{(item.original_price/100).toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="recommend-column">
					<view class="recommend-item" v-for="item in recommendGoods.filter((_, i) => i % 2 === 1)"
						:key="item._id" @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image :src="item.goods_banner[0].url" mode="widthFix" class="recommend-image"></image>
						<view class="recommend-info">
							<text class="recommend-name text-element-2">{{item.name}}</text>
							<view class="recommend-price-box">
								<text class="recommend-price">¥{{(item.default_price/100).toFixed(2)}}</text>
								<text class="recommend-original-price"
									v-if="item.original_price">¥{{(item.original_price/100).toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<qmy-logo></qmy-logo>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				dataLoaded: false,
				cartData: {
					items: [],
					total_quantity: 0,
					total_price: 0
				},
				isEditMode: false, // 是否处于编辑模式
				totalPrice: 0,
				startX: 0,
				currentId: '',
				deleteWidth: 100,
				touchStartTime: 0,
				recommendGoods: [], // 推荐商品列表
				currentDeleteCart: null, //当前待删除购物车商品
				freeShipping: 0, // 运费
				validItemsSwipingStates: {}, // 有效商品的滑动状态
				invalidItemsSwipingStates: {}, // 失效商品的滑动状态
			}
		},
		computed: {
			// 是否全选
			isAllSelected() {
				if (this.validItems.length === 0) return false;
				return this.validItems.every(item => item.is_checked);
			},
			// 选中数量
			selectedCount() {
				return this.cartData.items.filter(item => item.is_checked && item.is_valid !== false).length;
			},
			// 失效商品数量
			invalidCount() {
				return this.cartData.items.filter(item => item.is_valid === false).length;
			},
			// 有效商品（排除失效商品）
			validItems() {
				return this.cartData.items.filter(item => item.is_valid !== false);
			},
			// 失效商品列表
			invalidItems() {
				return this.cartData.items.filter(item => item.is_valid === false);
			}
		},
		onLoad() {
			this.getRecommendGoods();
		},
		onShow() {
			// 每次页面显示时重新加载购物车数据
			this.loadCartData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadCartData('refresh');
		},
		methods: {
			// 加载购物车数据
			loadCartData(type = '') {
				this.$Route('get-private-data', !this.dataLoaded ? !this.dataLoaded : type == '').getUserCartInfo().then(
					res => {
						this.cartData = res.data;
						this.calculateTotal();
						this.dataLoaded = true;
						uni.stopPullDownRefresh();
					}).catch(err => {
					this.dataLoaded = true;
					uni.stopPullDownRefresh();
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 切换商品选中状态
			toggleItemCheck(item) {
				if (item.is_valid === false) return; // 失效商品不可选中

				this.$Route('add-private-data').toggleCartItemsCheck([item._id], !item.is_checked).then(() => {
					item.is_checked = !item.is_checked;
					this.calculateTotal();
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 切换全选状态
			toggleSelectAll() {
				const newState = !this.isAllSelected;
				// 获取所有有效商品的ID
				const validIds = this.validItems.map(item => item._id);

				if (validIds.length === 0) return;

				this.$Route('add-private-data').toggleCartItemsCheck(validIds, newState).then(() => {
					// 更新本地状态
					this.validItems.forEach(item => {
						item.is_checked = newState;
					});
					this.calculateTotal();
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 修改商品数量
			updateQuantity(item) {
				if (item.is_valid === false) return; // 失效商品不可修改数量
				// 校验item.quantity是否为正整数
				const newQuantity = parseInt(item.quantity);
				if (isNaN(newQuantity) || newQuantity < 1 || newQuantity > item.stock) {
					this.$Toast('商品数量必须是整数');
					return;
				}

				this.$Route('add-private-data').updateCartItemQuantity(item._id, newQuantity).then(() => {
					item.quantity = newQuantity;
					this.calculateTotal();
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 加减商品数量
			changeQuantity(item, delta) {
				if (item.is_valid === false) return; // 失效商品不可修改数量

				const newQuantity = item.quantity + delta;
				if (newQuantity < 1 || newQuantity > item.stock) return;

				this.$Route('add-private-data').updateCartItemQuantity(item._id, newQuantity).then(() => {
					item.quantity = newQuantity;
					this.calculateTotal();
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 移除商品
			removeItem(item) {
				this.currentDeleteCart = item;
				this.$refs.deletePopup.open();
			},

			// 确认删除操作
			confirmDeleteAction() {
				if (!this.currentDeleteCart) return;

				this.$Route('add-private-data').removeCartItems([this.currentDeleteCart._id]).then((res) => {
					// 从本地移除
					const index = this.cartData.items.findIndex(i => i._id === this.currentDeleteCart._id);
					if (index !== -1) {
						this.cartData.items.splice(index, 1);
					}
					this.calculateTotal();
					this.$Toast(res.msg);
					this.currentDeleteCart = null;
					this.$refs.deletePopup.close();
				}).catch(err => {
					this.currentDeleteCart = null;
					this.$refs.deletePopup.close();
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});


			},

			// 取消删除
			cancelDelete() {
				this.currentDeleteCart = null;
				this.$refs.deletePopup.close();
			},

			// 清空失效商品
			clearInvalidItems() {
				const invalidIds = this.cartData.items
					.filter(item => item.is_valid === false)
					.map(item => item._id);

				if (invalidIds.length === 0) return;

				this.$refs.clearInvalidPopup.open();
			},

			// 确认清空失效商品
			confirmClearInvalidItems() {
				const invalidIds = this.cartData.items
					.filter(item => item.is_valid === false)
					.map(item => item._id);

				this.$Route('add-private-data').removeCartItems(invalidIds).then((res) => {
					// 从本地移除
					this.cartData.items = this.cartData.items.filter(item => item.is_valid !== false);
					this.$Toast(res.msg);
					this.$refs.clearInvalidPopup.close();
				}).catch(err => {
					this.$refs.clearInvalidPopup.close();
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				});
			},

			// 取消清空失效商品
			cancelClearInvalidItems() {
				this.$refs.clearInvalidPopup.close();
			},

			// 计算总价
			calculateTotal() {
				let total = 0;
				let hasShippingFee = false;
				const selectedItems = this.cartData.items.filter(item => item.is_checked && item.is_valid !== false);

				// 计算商品价格总和
				selectedItems.forEach(item => {
					total += item.price * item.quantity;

					// 检查是否有不包邮的商品
					if (!item.free_shipping && item.shipping_fee > 0) {
						hasShippingFee = true;
					}
				});

				// 计算运费
				if (hasShippingFee) {
					// 找出不包邮商品中最高的运费
					const maxShippingFee = Math.max(
						...selectedItems
						.filter(item => !item.free_shipping)
						.map(item => item.shipping_fee || 0)
					);
					if (maxShippingFee > 0) {
						this.$set(this, 'freeShipping', maxShippingFee);
						total += maxShippingFee;
					} else {
						this.$set(this, 'freeShipping', 0);
					}
				} else {
					this.$set(this, 'freeShipping', 0);
				}

				this.totalPrice = total;
			},

			// 去结算
			checkout() {
				if (this.selectedCount === 0) {
					this.$Toast('请选择要结算的商品');
					return;
				}
				// 获取已选中的商品ID
				const selectedItems = this.cartData.items
					.filter(item => item.is_checked && item.is_valid !== false)
					.map(item => item._id);

				// 跳转到订单确认页
				this.$NavigateTo(`/pages/detail/submitOrder?from=cart&cartItemIds=${JSON.stringify(selectedItems)}`)
			},

			// 触摸开始
			touchStart(index, e, isInvalid = false) {
				// 记录触摸开始时间
				this.touchStartTime = Date.now();

				const items = isInvalid ? this.invalidItems : this.validItems;
				const currentItem = items[index];

				// 关闭所有已打开的滑动项
				this.validItems.forEach(item => {
					this.$set(this.validItemsSwipingStates, item._id, false);
				});
				this.invalidItems.forEach(item => {
					this.$set(this.invalidItemsSwipingStates, item._id, false);
				});

				this.startX = e.touches[0].clientX;
				this.currentId = currentItem._id;
			},

			// 触摸移动
			touchMove(index, e, isInvalid = false) {
				const items = isInvalid ? this.invalidItems : this.validItems;
				const currentItem = items[index];
				if (currentItem._id !== this.currentId) return;

				const moveX = e.touches[0].clientX;
				const moveDistance = moveX - this.startX;

				// 只允许向左滑动
				if (moveDistance > 0) {
					this.$set(isInvalid ? this.invalidItemsSwipingStates : this.validItemsSwipingStates, currentItem._id,
						false);
					return;
				}

				// 滑动距离超过阈值时打开删除按钮
				if (Math.abs(moveDistance) > this.deleteWidth / 2) {
					this.$set(isInvalid ? this.invalidItemsSwipingStates : this.validItemsSwipingStates, currentItem._id,
						true);
				} else {
					this.$set(isInvalid ? this.invalidItemsSwipingStates : this.validItemsSwipingStates, currentItem._id,
						false);
				}
			},

			// 触摸结束
			touchEnd(index, e, isInvalid = false) {
				const items = isInvalid ? this.invalidItems : this.validItems;
				const currentItem = items[index];
				if (currentItem._id !== this.currentId) return;

				// 如果是点击（触摸时间小于200ms且移动距离小于5px）
				const touchEndTime = Date.now();
				const touchDuration = touchEndTime - this.touchStartTime;
				const moveDistance = Math.abs(e.changedTouches[0].clientX - this.startX);

				if (touchDuration < 200 && moveDistance < 5) {
					this.$set(isInvalid ? this.invalidItemsSwipingStates : this.validItemsSwipingStates, currentItem._id,
						false);
				}

				this.currentId = '';
			},

			// 获取推荐商品
			async getRecommendGoods() {
				try {
					const res = await this.$Route('get-public-data', true).getGoodsList();
					if (res.code === 200) {
						this.recommendGoods = res.data.recommendList;
					}
				} catch (err) {
					console.error('获取推荐商品失败:', err);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 370rpx;
		padding-bottom: 200rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.go-shopping-btn {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: #14cc60;
			color: #fff;
			font-size: 28rpx;
			border-radius: 35rpx;
		}
	}

	.cart-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.cart-list {
		padding: 20rpx;
	}

	.cart-item {
		position: relative;
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.item-content {
			position: relative;
			z-index: 2;
			background-color: #fff;
			transform: translateX(0);
			transition: transform 0.3s ease;
			display: flex;
			padding: 20rpx;

			.checkbox {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				color: #fff;

				.checkbox-inner {
					display: flex;
					align-items: center;
					width: 35rpx;
					height: 35rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2rpx solid #ddd;
					justify-content: center;
					transition: all 0.3s ease;

					&.checked {
						font-size: 42rpx;
						border: none !important;
						color: #14cc60;
						transform: scale(1.1);
					}
				}
			}

			.goods-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 12rpx;
				background-color: #f5f5f5;
				margin-right: 20rpx;
				object-fit: cover;
			}

			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				min-width: 0;

				.goods-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.4;
					margin-bottom: 10rpx;
				}

				.item-specs {
					margin-bottom: 10rpx;

					.spec-text {
						font-size: 24rpx;
						color: #999;
						background-color: #f5f5f5;
						padding: 4rpx 10rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;
					}

					&:last-child {
						margin-right: 0;
					}
				}

				.price-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: auto;

					.price {
						display: flex;
						align-items: baseline;

						.price-symbol {
							font-size: 24rpx;
							color: #FF3B30;
							font-weight: 500;
						}

						.price-value {
							font-size: 32rpx;
							color: #FF3B30;
							font-weight: bold;
							margin: 0 4rpx;
						}

						.original-price {
							font-size: 22rpx;
							color: #FF3B30;
							margin-left: 10rpx;
							background-color: rgba(255, 59, 48, 0.1);
							padding: 2rpx 8rpx;
							border-radius: 4rpx;
						}
					}

					.quantity-control {
						display: flex;
						align-items: center;
						height: 45rpx;
						line-height: 45rpx;
						overflow: hidden;
						border-radius: 10rpx;

						.qty-btn {
							width: 45rpx;
							height: 45rpx;
							line-height: 45rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #f7f7f7;
							position: relative;
							transition: all 0.2s;

							&.disabled {
								color: #ccc;
								background-color: #fafafa;
								pointer-events: none;
							}

							&:not(.disabled):active {
								background-color: #bfc1c2;
							}
						}

						.quantity-input {
							width: 60rpx;
							height: 45rpx;
							line-height: 45rpx;
							text-align: center;
							margin: 0 6rpx;
							font-size: 26rpx;
							background-color: #f7f7f7;
						}
					}
				}
			}
		}

		.delete-btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			height: 100%;
			background-color: #ff4f4f;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 1;

			.iconfont {
				color: #fff;
				font-size: 40rpx;
			}

			.delete-text {
				color: #fff;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}

		&.slide-open {
			.item-content {
				transform: translateX(-100rpx);
			}
		}
	}

	.invalid-section {
		margin: 20rpx 0;

		.invalid-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.invalid-title {
				font-size: 26rpx;
				color: #999;
			}

			.clear-invalid {
				font-size: 26rpx;
				color: #14cc60;
				padding: 10rpx 20rpx;
				background-color: rgba(20, 204, 96, 0.1);
				border-radius: 30rpx;
			}
		}

		.invalid-item {
			margin-bottom: 0;
			border-radius: 0;

			&:last-child {
				border-radius: 0 0 20rpx 20rpx;
			}

			.checkbox.disabled {
				opacity: 0.5;
				pointer-events: none;
			}

			.goods-info {
				opacity: 0.6;
			}

			.invalid-tag {
				font-size: 24rpx;
				color: #999;
				background-color: #f5f5f5;
				padding: 4rpx 16rpx;
				border-radius: 4rpx;
			}
		}
	}

	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		z-index: 100;

		.select-all {
			display: flex;
			align-items: center;
			color: #fff;

			.checkbox {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
				width: 35rpx;
				height: 35rpx;
				border: 2rpx solid #ddd;
				border-radius: 50%;
				transition: all 0.3s ease;

				&.checked {
					color: #14cc60;
					border: none !important;
					transform: scale(1.1);
				}
			}

			.select-text {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}

		.price-section {
			flex: 1;
			text-align: right;
			padding-right: 20rpx;

			.total-price {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;

				.price-symbol {
					font-size: 24rpx;
					color: #FF3B30;
				}

				.price-value {
					font-size: 32rpx;
					color: #FF3B30;
					font-weight: bold;
				}
			}

			.price-tip {
				font-size: 22rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}

		.checkout-btn {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: #14cc60;
			color: #fff;
			font-size: 28rpx;
			border-radius: 35rpx;
			font-weight: 500;
			transition: all 0.3s ease;

			&.disabled {
				background-color: #ccc;
			}

			&:not(.disabled):active {
				transform: scale(0.98);
				background-color: #11b051;
			}
		}
	}

	/* 通用文本溢出样式 */
	.text-element-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break: break-all;
	}

	/* 推荐商品样式 */
	.recommend-goods {
		background-color: #fff;
		padding: 30rpx;

		.recommend-header {
			margin-bottom: 30rpx;

			.section-title {
				display: flex;
				align-items: center;

				.title-decoration {
					width: 50rpx;
					height: 50rpx;
				}

				.title-text {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}

		.recommend-waterfall {
			display: flex;
			justify-content: space-between;

			.recommend-column {
				width: 48%;

				.recommend-item {
					margin-bottom: 20rpx;
					background-color: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
					transition: transform 0.2s ease, box-shadow 0.2s ease;

					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
					}

					.recommend-image {
						width: 100%;
						border-radius: 16rpx 16rpx 0 0;
					}

					.recommend-info {
						padding: 16rpx;

						.recommend-name {
							font-size: 26rpx;
							color: #333;
							margin-bottom: 10rpx;
							line-height: 1.4;
							height: 72rpx;
						}

						.recommend-price-box {
							display: flex;
							align-items: baseline;

							.recommend-price {
								font-size: 28rpx;
								color: #FF3B30;
								font-weight: bold;
								margin-right: 10rpx;
							}

							.recommend-original-price {
								font-size: 22rpx;
								color: #999;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}
</style>